const { Easing, shared, timing} = wx.worklet
const list = [
  {
    title: "预置动画函数",
    data: [
      { title: "Bounce", easing: Easing.bounce },
      { title: "Ease", easing: Easing.ease },
      { title: "Elastic", easing: Easing.elastic(4) }
    ]
  },
  {
    title: "标准缓动函数",
    data: [
      { title: "Linear", easing: Easing.linear },
      { title: "Quad", easing: Easing.quad },
      { title: "Cubic", easing: Easing.cubic },
      { title: "Poly", easing: Easing.poly(4) },
    ]
  },
  {
    title: "其它数学函数",
    data: [
      {
        title: "Bezier",
        easing: Easing.bezier(0, 2, 1, -1).factory()
      },
      { title: "Circle", easing: Easing.circle },
      { title: "Sin", easing: Easing.sin },
      { title: "Exp", easing: Easing.exp }
    ]
  },
  {
    title: "辅助函数",
    data: [
      {
        title: "In + Bounce",
        easing: Easing.in(Easing.bounce)
      },
      {
        title: "Out + Exp",
        easing: Easing.out(Easing.exp)
      },
      {
        title: "InOut + Elastic",
        easing: Easing.inOut(Easing.elastic(1))
      }
    ]
  }
];

Page({
  data: {
    list
  },
  onLoad() {
    this.progress = shared(0)
    this.applyAnimatedStyle('.box', () => {
      'worklet'
      console.info('@@ ', this.progress.value)
      return {
        width: `${this.progress.value * 80}px`,
        height: `${this.progress.value * 80}px`,
        opacity: this.progress.value
      }
    })
  },

  startAnimation(evt) {
    const { idx, subidx } = evt.currentTarget.dataset
    const easing = list[idx]['data'][subidx]['easing']

    this.progress.value = 0

    setTimeout(() => {
      this.progress.value = timing(1, {
        duration: 1200,
        easing
      })
    }, 16)
  }
})
